<template>
    <transition name="dialog">
        <div v-if="visible" class="overlay">
            <div class="centered">
                <div class="dialog-header"><span>{{ title }}</span>
                </div>
                <div class="dialog-body">{{ message }}</div>
                <div class="dialog-foot"> <span style="margin-left:20px;" class="button-el" @click="confirm">确认</span>
                    <span style="margin-left:20px;" class="button-el" @click="cancel">取消</span>
                </div>

            </div>
        </div>
    </transition>
</template>
  
<script>
export default {
    data() {
        return {
            visible: false,
            title: '',
            message: '',
            confirmCallback: null,
            cancelCallback: null
        };
    },
    methods: {
        open({ title, message, onConfirm, onCancel }) {
            console.log(title);
            this.title = title;
            this.message = message;
            this.confirmCallback = onConfirm;
            this.cancelCallback = onCancel;
            this.visible = true;
        },
        confirm() {
            this.visible = false;
            this.confirmCallback && this.confirmCallback();
        },
        cancel() {
            this.visible = false;
            this.cancelCallback && this.cancelCallback();
        }
    }
};
</script>
  
<style lang="scss">
.centered {
    position: fixed;
    /* 使用固定定位 */
    top: 50%;
    /* 垂直方向上的中点 */
    left: 50%;
    /* 水平方向上的中点 */
    transform: translate(-50%, -50%);
    /* 向上和向左移动50%的自身宽高，以确保居中 */
    width: 400px;
    /* 设置宽度 */
    background-color: #fff1f1;
    border-radius: 3px;
    padding: 10px 5px;
    z-index: 10000;

    .dialog-header {
        height: 30px;
        line-height: 20px;
        font-size: 18px;
        font-weight: bold;
        color: #594fda;
        border-bottom: #faffff 1px solid;
    }

    .dialog-body {
        height: 100px;
        padding-top: 20px;
        margin-left: 5px;
        font-size: 16px;
        color: #3d3d3d;
    }

    .dialog-foot {
        height: 20px;

        .button-el {
            cursor: pointer;
            background-color: #ccffff;
            font-weight: bold;
            padding: 5px 18px;
            border-radius: 5px;
            color: #535353;

            &:hover {
                background-color: #e1e6ff;
                color: white;
            }
        }
    }

    /* 背景颜色，可根据需要调整 */
    /* 更多样式 */
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 半透明黑色背景 */
    z-index: 9999;
    /* 确保遮罩层位于内容下方 */
    transition: opacity 0.3s ease;

}

.dialog-enter-active,
.dialog-leave-active {
    transition: opacity 0.5s ease;
}

.dialog-enter-from,
.dialog-leave-to {
    opacity: 0;
}

/* 样式可以根据您的需求进行调整 */
</style>
  